import React, {Component} from 'react'
import {View, Text, ScrollView, TouchableOpacity} from 'react-native'
import {getUnitChaptersApi} from '../../config/api'
import styles from '../../config/styles'

class UnitSelector extends Component {
    state = {
        chapters: []
    }

    componentDidMount () {
        const {book_id} = this.props.navigation.state.params
        getUnitChaptersApi(book_id).then((data) => {
            this.setState({chapters: data.data})
        })
    }

    complete = (chapter) => {
        const {onComplete} = this.props.navigation.state.params
        onComplete(chapter)
        this.props.navigation.goBack()
    }

    render () {
        return(
            <ScrollView>
                {this.state.chapters.map((chapter, index) => {
                    return(
                        <TouchableOpacity 
                            key={index} 
                            style={styles.selector_container}
                            onPress={() => this.complete(chapter)}
                        >
                            <Text>{chapter.name}</Text>
                        </TouchableOpacity>
                    )
                })}
            </ScrollView>
        )
    }
}

export default UnitSelector